layui.use(['form', 'table'], function () {
    let $ = layui.jquery,
        form = layui.form,
        table = layui.table;

    table.render({
        elem: '#tbl',
        url: ctx + '/api/goods',
        toolbar: '#toolbar',
        cols: [[
            {type: "checkbox", width: 50},
            {field: 'id', width: 80, title: '主键', sort: true},
            {field: 'spuNo', width: 120, title: '商品编码', sort: true},
            {field: 'name', width: 180, title: '商品名称'},
            {
                field: 'picUrl', width: 180, title: '商品主图', templet(d) {
                    return "<div class='good-pic' style='background: url(" + (ctx + d.picUrl) + ") no-repeat center center/cover'></div>";
                }
            },
            {
                field: 'category', width: 180, title: '所属类别', templet: function (d) {
                    return d.category.name;
                }
            },
            {field: 'markPrice', width: 100, title: '标价(元)'},
            {field: 'price', width: 100, title: '实售价(元)'},
            {field: 'isBestSeller', width: 100, title: '是否热销', templet: "#is_best_seller"},
            {field: 'isNewProduct', width: 100, title: '是否新品', templet: "#is_new_product"},
            {field: 'isTakeOff', width: 100, title: '是否下架', templet: "#is_take_off"},
            {
                field: 'isDel', width: 100, title: '是否删除', templet: function (d) {
                    return d.isDel ? "是" : "否"
                }
            },
            {field: 'description', width: 100, title: '备注'},
            {field: 'detail', width: 280, title: '商品详情'},
            {title: '操作', minWidth: 150, toolbar: '#row-toolbar', align: "center"}
        ]],
        limits: [10, 20, 30, 50, 100],
        limit: 10,
        page: true,
    });

    // 监听搜索操作
    form.on('submit(search-btn)', function (data) {

        //表格重载
        table.reload('tbl', {
            page: {
                curr: 1
            }, where: data.field
        }, 'data');

        return false;
    });

    //重置
    $("#reset-btn").click(function () {
        $("#search-form")[0].reset();
    });

    // 下架监听
    form.on('switch(is_take_off)', function (obj) {
        let id = this.value;
        //var name = this.name;
        //layer.tips(id + ' ' + name + ': ' + obj.elem.checked, obj.othis);
        let url = ctx + "/api/goods/takeoff"
        $.ajax({
            url,
            method: "patch",
            dataType: "json",
            data: {
                id,
                isTakeOff: obj.elem.checked
            },
            success(resp) {
                if (resp.success) {
                    layer.msg("操作成功");
                } else {
                    layer.msg("操作失败");
                }
            },
            error(resp) {
                console.log(resp);
            }
        });
    });

    // 销售最好监听
    form.on('switch(is_best_seller)', function (obj) {
        let id = this.value;
        //var name = this.name;
        //layer.tips(id + ' ' + name + ': ' + obj.elem.checked, obj.othis);
        let url = ctx + "/api/goods/bestseller"
        $.ajax({
            url,
            method: "patch",
            dataType: "json",
            data: {
                id,
                isBestSeller: obj.elem.checked
            },
            success(resp) {
                if (resp.success) {
                    layer.msg("操作成功");
                } else {
                    layer.msg("操作失败");
                }
            },
            error(resp) {
                console.log(resp);
            }
        });
    });
    // 是否新品监听
    form.on('switch(is_new_product)', function (obj) {
        let id = this.value;
        //var name = this.name;
        //layer.tips(id + ' ' + name + ': ' + obj.elem.checked, obj.othis);
        let url = ctx + "/api/goods/newproduct"
        $.ajax({
            url,
            method: "patch",
            dataType: "json",
            data: {
                id,
                isNewProduct: obj.elem.checked
            },
            success(resp) {
                if (resp.success) {
                    layer.msg("操作成功");
                } else {
                    layer.msg("操作失败");
                }
            },
            error(resp) {
                console.log(resp);
            }
        });
    });

    /**
     * toolbar监听事件
     */
    table.on('toolbar(tbl)', function (obj) {
        if (obj.event === 'add') {  // 监听添加操作
            layer.open({
                title: '添加商品',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['75%', '80%'],
                content: ctx + '/good/add',
            });
        } else if (obj.event === 'delete') {  // 监听批量删除操作
            let checkStatus = table.checkStatus('tbl')
                , data = checkStatus.data;
            let ids = [];
            data.forEach(t => ids.push(t.id));
            if (ids.length === 0) {
                layer.msg("请选中您要删除的记录")
            } else {
                layer.confirm("是否确认删除选中的记录", function (index) {
                    deleteByIds(ids);
                    table.reload("tbl");
                    layer.close(index);
                })
            }
        }
    });

    //监听表格复选框选择
    table.on('checkbox(tbl)', function (obj) {
        console.log(obj)
    });
    //监听表格行工具栏
    table.on('tool(tbl)', function (obj) {
        let data = obj.data;
        if (obj.event === 'edit') {
            layer.open({
                title: '修改商品信息',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['75%', '80%'],
                content: ctx + '/good/edit?id=' + data.id,
            });
            return false;
        } else if (obj.event === 'delete') {
            layer.confirm('是否确认删除', function (index) {
                let ids = [obj.data.id];
                deleteByIds(ids)
                table.reload("tbl");
                layer.close(index);
            });
        }
    });

    function deleteByIds(ids) {
        let url = ctx + "/api/goods"
        $.ajax({
            url,
            method: "delete",
            dataType: "json",
            data: {
                ids
            },
            traditional: true,
            success(resp) {
                if (resp.success) {
                    layer.msg("成功标记为删除" + resp.rows + "条数据");
                } else {
                    layer.alert(resp.error);
                }
            }
        });
    }

});